<template>
        <div class="main">
            <ul class="listTitle">
                <li v-for='item in this.$store.state.stockManage.stockInfoLeaveRecordList'>{{item.label}}</li>
            </ul>
            <ul class="dataList" v-for='(item,index) in dataList'>
                <li>{{index + 1}}</li>
                <li>{{item.date | formatDate}}</li>
                <li>{{item.num | formData}}</li>
                <li>{{item.no |formData}}</li>
                <li>{{item.manager | formData}}</li>
                <li @click='toOutStockInfo(index)'>{{item.distributorName}}</li>
            </ul>
            <p class="nullContent" v-show='nullContent'>暂无数据</p>
        </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {
                dataList: [],
                nullContent: false,
                storageId: this.$store.state.stockManage.storageId
            }
        },
        filters: {
            // 格式化日期
            formatDate(date) {
                if (date == null || date == '' || date == undefined) {
                    return '-';
                } else {
                    let y, m, d, h, i, s,
                        t = new Date(parseInt(date));
                    y = t.getFullYear()
                    m = t.getMonth() + 1
                    d = t.getDate()
                    return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
                }
            },
            //
            formData(data) {
                if (data == null || data == '' || data == undefined) {
                    return '-';
                } else {
                    return data;
                }
            },
        },
        created: function() {
            this.getStockLeaveList();
        },
        methods: {
            getStockLeaveList: function() {
                this.$store.commit('showLoading');
                this.getStockInfoLeaveList({
                    storageId: this.storageId
                }).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code == 200) {
                        this.dataList = data.data;
                        if (data.data.length == 0) {
                            this.nullContent = true;
                        }
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg))
            },
            toOutStockInfo(i) {
                let leaveWarehouseId = this.dataList[i].leaveWarehouseId;
                this.$store.commit('toOutStockInfo', {
                    leaveWarehouseId: leaveWarehouseId
                });
            },
            ...mapActions(['getStockInfoLeaveList'])
        }
    }

</script>
<style scoped>
    .main {
        width: 100%;
        background-color: #fff;
        margin: 10px 0 0;
    }
    
    .listTitle {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #999999;
        font-size: 14px;
        text-align: center;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        box-sizing: border-box;
    }
    
    .dataList {
        width: 100%;
        height: 56px;
        line-height: 56px;
        color: #333333;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
    }
    
    .dataList {
        border-bottom: 1px solid #dddddd;
    }
    
    .dataList li,
    .listTitle li {
        border-right: 1px solid #dddddd;
        box-sizing: border-box;
    }
    
    li {
        float: left;
    }
    
    ul {
        margin: 0;
        padding: 0;
    }
    
    .listTitle li:nth-child(1),
    .dataList li:nth-child(1) {
        width: 8%;
    }
    
    .listTitle li:nth-child(2),
    .dataList li:nth-child(2) {
        width: 18%;
    }
    
    .listTitle li:nth-child(3),
    .dataList li:nth-child(3) {
        width: 18%;
    }
    
    .listTitle li:nth-child(4),
    .dataList li:nth-child(4) {
        width: 18%;
    }
    
    .listTitle li:nth-child(5),
    .dataList li:nth-child(5) {
        width: 18%;
    }
    
    .listTitle li:nth-child(6),
    .dataList li:nth-child(6) {
        width: 20%;
        cursor: pointer;
        border: none;
    }
    
    .dataList li:nth-child(6) {
        color: #35C885;
        padding: 0 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

</style>
